<template>
	<div class="app-container">
	<el-row :gutter="32">
		<el-col :xs="24" :sm="24" :lg="11">
			<el-card class="box-card" style='height: 270px;'>
	        <div slot="header" class="clearfix">
	        	<span>基本信息</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='10'>MSISDN:{{msisdn||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>ICCID:{{iccid||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>IMSI:{{imsi||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>IMEI:{{imei||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>运营商:{{ispType||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>网络类型:{{networkType||'2G/3G/4G'}}</el-col>
	        	<el-col class='spanCol' :span='10'>套餐:{{pricingName||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>计费组代码:{{bactNo||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>SIM卡类型:{{cardType||'无'}}</el-col>
	       <!-- 	<el-col class='spanCol' :span='10'>实名状态:{{checkID||'无'}}</el-col>-->
	        </el-row>
	        </el-card>
		</el-col>
		<el-col :xs="24" :sm="24" :lg="9">
			<el-card class="box-card" style='height: 270px;'>
	        <div slot="header" class="clearfix">
	        	<span>计费周期</span>
	        </div>
	        <el-row style='overflow-y:auto ;'>
	        	<el-col class='spanCol' :span='24'><span class="spanWidth">出库日期:</span><span class="spanWidth2">{{chukuDate||'无'}}</span></el-col>
	        	<el-col class='spanCol' :span='24'><span class="spanWidth">测试期起始日期:</span><span class="spanWidth2">{{testStartDate||'无'}}</span></el-col>
	        	<el-col class='spanCol' :span='24'><span class="spanWidth">沉默期起始日期:</span><span class="spanWidth2">{{silentStartDate||'无'}}</span></el-col>
	        	<el-col class='spanCol' :span='24'><span class="spanWidth">激活日期:</span><span class="spanWidth2">{{activationTime||'无'}}</span></el-col>
	        	<el-col class='spanCol' :span='24'><span class="spanWidth">计费起始日期:</span><span class="spanWidth2">{{activationTime||'无'}}</span></el-col>
	        	<el-col class='spanCol' :span='24'><span class="spanWidth">计费结束日期:</span><span class="spanWidth2">{{lossTime||'无'}}</span></el-col>
	       <!-- 	<el-col class='spanCol' :span='24'><span class="spanWidth">测试期流量:</span><span class="spanWidth2">无</span></el-col>-->
	        </el-row>
	        </el-card>
		</el-col>
		<el-col :xs="24" :sm="24" :lg="4">
			<el-card class="box-card" style='height: 270px;'>
	        <div slot="header" class="clearfix">
	        	<span>功能信息</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='20'>短信功能:无</el-col>
	        	<el-col class='spanCol' :span='20'>卡状态:{{cardStatus||'无'}}</el-col>
	        	<el-col class='spanCol' :span='20'>语音功能:无</el-col>
	        </el-row>
	        </el-card>
		</el-col>
	</el-row>
	<el-card class="box-card" style='margin-top: 30px;'>
	        <div slot="header" class="clearfix">
	        	<span>状态信息</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='6'>开关机状态:{{gprsStatus||'无'}}</el-col>
	        	<el-col class='spanCol' :span='6'>工作状态:{{cardStatus||'无'}}</el-col>
	        	<el-col class='spanCol' :span='10'>状态说明:无</el-col>
	        	<el-col class='spanCol' :span='6'>当月流量(MB):{{flowTotal||'无'}}</el-col>
	        	<el-col class='spanCol' :span='6'>剩余流量(MB):{{flowLeft||'无'}}</el-col>
	        </el-row>
	 </el-card>
	 <el-row :gutter="32" style='margin-top: 30px;'>
	 	<!--<el-col :span='24'>
	 		<el-card class="box-card">
				    <el-row>
				    	<el-col :span='8'>
				    <el-date-picker
			      v-model="valueMonthDay"
			      type="date"
			      placeholder="选择日期">
			     </el-date-picker>
			    	</el-col>
				   </el-row>
	        <div slot="header" class="clearfix">
	        	<span>流量统计-日流量</span>
	        </div>
	        <line-chart :chart-data="lineChartData" :valueMonthDay='valueMonthDay' :iccid='this.$route.params.id'   />
	        </el-card>
	 	</el-col>-->
	 	<el-col :span='24' style="margin-top: 15px;">
	 		<el-card class="box-card">
	 			<el-row>
	    			<el-col :span='8'>
	    				 	<span class="demonstration">选择月份</span>
						    <el-date-picker
						      v-model="valueMonth"
						      type="month"
						      placeholder="选择月">
						    </el-date-picker>
	    			</el-col>
	    		</el-row>
	        <div slot="header" class="clearfix">
	        	<span>流量统计-月流量</span>
	        </div>
	        <LineChartMonth :chart-data="lineChartData" :valueMonth='valueMonth' :iccid='this.$route.params.id' />
	        </el-card>
	 	</el-col>
	 </el-row>
	 <el-card class="box-card" style='margin-top: 30px;'>
        <div slot="header" class="clearfix">
        	<span>充值记录</span>
        </div>
	  <el-table v-loading="loading" :data="postList">
      <el-table-column label="订单号" align="center" prop="orderNo" />
      <el-table-column label="外部订单号" align="center" prop="extOrderNo" />
      <el-table-column label="套餐" align="center" prop="pricingName" />
      <el-table-column label="充值方式" align="center" prop="depositChanl" />
      <el-table-column label="充值价格(元)" align="center" prop="depositAmt"  />
      <el-table-column label="充值月数" align="center" prop="count"  />
      <el-table-column label="创建时间" align="center" prop="createTime"  />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
	 <!--<el-row>
	 	<el-button type="primary">充值</el-button>
	 </el-row>    -->
	 </el-card>
	</div>
</template>

<script>
	import LineChart from './../../dashboard/lineChartCardinfo'
	import LineChartMonth from './../../dashboard/lineChartCardinfoMonth'
	import { listPost} from "@/api/system/post";
	import { getCardInfo,getCardRechargeRecord } from "@/api/system/info";
	const lineChartData = {
		  newVisitis: {
		    expectedData: [100, 120, 161, 134, 105, 160, 165],
		    actualData: [120, 82, 91, 154, 162, 140, 145]
		  },
		}
	export default{
		data(){
			return{
				// 遮罩层
     			loading: true,
				 // 总条数
      			total: 0,
				postList:[],
				// 查询参数
		        queryParams: {
		        pageNum: 1,
		        pageSize: 10,
		        iccid:this.$route.params.id
		      },
		      lineChartData:lineChartData.newVisitis,
			  msisdn:'',
			  iccid:'',
			  imsi:'',
			  imei:'',
			  activationTime:'',   //激活时间
			  lossTime:'',   //到期时间
			  chukuDate:'', //出库时间
			  testStartDate:'',  //测试起始时间
			  silentStartDate:'',  //沉默起始时间
			  flowTotal:'',   //当月总流量
			  flowLeft:'',     //剩余流量
			  gprsStatus:'',   //开关机状态
			  cardStatus:'',    //卡状态
			  pricingName:'',   //套餐名称
			  ispType:'',  //运营商
			  bactNo:'',  //计费组代码
			  cardType:'',  //sim类型
			  networkType:'',  //网络类型
			  checkID:'',   //实名状态
 			  valueMonthDay:new Date(),
			  valueMonth:new Date(),
			}
		},
		created(){
			this.getList();
			var cardId = this.$route.params.id;
			getCardInfo(cardId).then((res)=>{
				console.log('详情')
				console.log(res);
				this.msisdn = res.data.cardInfo.msisdn;
				this.iccid = res.data.cardInfo.iccid;
				this.imsi = res.data.cardInfo.imsi;
				this.imei = res.data.cardInfo.imei;
				this.pricingName = res.data.cardInfo.pricingName;  //套餐名称
				this.ispType = res.data.cardInfo.ispType;  //套餐名称
				this.bactNo = res.data.cardInfo.bactNo;  //计费组代码
				this.esimFlag=res.data.cardInfo.esimFlag==0?'物联网卡':'eSIM卡';//sim卡类型
				this.activationTime = res.data.cardInfo.activateTime;   //激活时间
				this.lossTime = res.data.cardInfo.lossTime;   //计费到期时间
				this.chukuDate = res.data.cardInfo.chukuDate;   //出库时间
				this.testStartDate = res.data.cardInfo.testStartDate;   //测试起始时间
				this.silentStartDate = res.data.cardInfo.silentStartDate;   //沉默起始时间
				this.networkType = res.data.cardInfo.networkType;   //网络类型
				this.cardType = res.data.cardInfo.cardType;   //sim卡类型
				this.flowTotal = (res.data.cardInfo.flowTotal/1024).toFixed(2);   //当月总流量
				this.flowLeft = (res.data.cardInfo.flowLeft/1024).toFixed(2);   //剩余流量
				this.gprsStatus = res.data.cardInfo.gprsStatus=='1'?'开机':'关机';   //开关机状态
				this.cardStatus =this.cardStatusFilter(res.data.cardInfo.status);
			})
		},
		components:{
			LineChart,
			LineChartMonth
		},
		
		methods:{
			/** 查询岗位列表 */
		    getList() {
		      this.loading = true;
		      getCardRechargeRecord(this.queryParams).then(response => {
		        this.postList = response.rows;
		        this.total = response.total;
		        this.loading = false;
		      });
		    },
		    cardStatusFilter(a){
		    	var cardStatueStr = '';
		    	if(a=='0'){
		    		cardStatueStr = '其他'
		    	}else if(a=='1'){
		    		cardStatueStr = '待激活'
		    	}else if(a=='2'){
		    		cardStatueStr = '沉默期'
		    	}else if(a=='3'){
		    		cardStatueStr = '测试期'
		    	}else if(a=='4'){
		    		cardStatueStr = '正常'
		    	}else if(a=='5'){
		    		cardStatueStr = '停机'
		    	}else if(a=='6'){
		    		cardStatueStr = '已销号'
		    	}
		    	return cardStatueStr;
		    }
		}
	}
</script>

<style scoped="scoped">
	.spanCol{
		font-size: 14px;
		padding: 8px;
		color: #606266;
	}
	.spanWidth{
		display: inline-block;
		width: 110px;
	}
	.spanWidth2{
		display: inline-block;
	/*	width: 105px;*/
	}
</style>